<template>
    <f7-card>
      <f7-card-header>
           <div class="text-center_tite">狗东物流 <span class="role-icon">超管</span></div>
      </f7-card-header>
      <f7-card-footer>
        <div class="text-center_footer">18310306740</div>
      </f7-card-footer>
      <div class="item-face">
        <p class="text-gray2">个人名片</p>
        <img slot="media" round src="../assets/img/infor-face.png" class="logo-icons" />
      </div>
    </f7-card>
</template>

<script>
</script>

<style scoped>
.card {
    margin: 10px;
    padding: 5px 0 5px 0;
    background: #FFFFFF;
    box-shadow: none;
    border-radius: 10px;
    min-height: 100px;
}
.ios .card-footer, .card-header{
    position: initial;
}
.ios .card-header{
   padding: 4px 15px;
    min-height: 40px;
}
.text-center_tite{
    font-size: 16px;
    color: #333;
}
.role-icon{
    vertical-align: middle;
    background: #9db7ff;
    color: #fff;
    font-size: 12px;
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 10px;
}
.ios .card-footer {
    color: #6d6d72;
}
.item-face{
    position: absolute;
    right: 15px;
    top: 5px;
}

.text-gray2{
    color: #e5e5e5;
    font-size: 12px;
    display: inherit;
    margin: 7px 0px;
}
.logo-icons {
    width: 48px;
    height: 48px;
    border-radius: 100%;
}
.card-wrap h5 {
    color: #666;
    font-size: 12px;
    margin: 0;
    line-height: 18px;
}
</style>
